/*
 * 全局 el-drawer 样式设置
 * 默认情况下，el-drawer 宽度为 35%，若自定义变量 --el-drawer-width 未定义，则使用 50% 作为备用宽度
 * 使用 !important 确保自定义样式优先级高于其他样式
 * 添加过渡效果使宽度变化更平滑
 * 设置最大和最小宽度避免在极端屏幕下显示异常
 */
.el-drawer {
  min-width: 280px !important;
  max-width: 100% !important;
}

/*
 * 当窗口宽度在 769px 到 1024px 之间时的 el-drawer 样式
 * 调整 el-drawer 宽度为 100%
 */
@media (width >= 769px) and (width <= 1024px) {
  .el-drawer {
    --el-drawer-width: 100%;

    width: var(--el-drawer-width, 50%) !important;
  }
}

/*
 * 当窗口宽度在 481px 到 768px 之间时的 el-drawer 样式
 * 让 el-drawer 宽度占满大部分屏幕
 */
@media (width >= 481px) and (width <= 768px) {
  .el-drawer {
    --el-drawer-width: 100%;

    width: var(--el-drawer-width, 50%) !important;
  }
}

/*
 * 小屏幕（宽度小于等于 480px）样式
 * el-drawer 宽度为 100%
 */
@media (width <= 480px) {
  .el-drawer {
    --el-drawer-width: 100%;

    width: var(--el-drawer-width, 50%) !important;
  }
}

/*
 * el-drawer 内容区域样式
 * 设置背景颜色和内边距
 */
.el-drawer__content {
  padding: 15px;
  background-color: #fff;
}

/*
 * el-drawer 标题区域样式
 * 设置字体大小和颜色
 */
.el-drawer__title {
  padding: 15px;
  font-size: 18px;
  color: #333;
}

/*
 * el-drawer 关闭按钮区域样式
 * 设置对齐方式和内边距
 */
.el-drawer__close-btn {
  padding: 10px;
  text-align: right;
}
